<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //超超超简易的事件监听
        //原理。有一个放事件监听函数点数组，每次$on的时候会将函数放进数组，每次$emit的时候会把放进去的数组中对应的函数执行
        class vue {
            eventArr = []
            $on(onevent, cb) {
                //判断数组中是否存在改监听函数
                let test = this.eventArr.find(item => item[onevent])
                //如果存在，则覆盖
                if (test) {
                    test[onevent] = cb
                } else {
                    //否则创建一个新的监听函数
                    let obj = Object.create(null)
                    obj[onevent] = cb
                    this.eventArr.push(obj)
                }
            }
            $emit(emitevent, msg) {
                //每次发布的时候遍历数组，执行对应的监听函数
                this.eventArr.find(item => item[emitevent])?.[emitevent](msg)
            }
        }
        let app = new vue()
        app.$on("test", msg => {
            console.log(msg.msg + "xxx"); //aaxxx
        })
        app.$on("test", msg => {
            console.log("zzz"+msg)
        })
        app.$emit("test1","ccc")
    </script>
</body>

</html>